<div id="pathAnalysis" v-cloak>
    <div class="compare">
            <div class="compare-div">
                    选择分析类别
            </div>
            <i-select v-model="model1" style="width:200px">
                    <i-option style="margin-left: 10px" v-for="item in cityList" :value="item.value" :key="item.value" @on-change="selectComp">{{
                        item.name }}</i-option>
            </i-select>
        <row>
                <i-col span="12">
                    <Date-picker @on-change="handleChange" :disabled="isDisabledStart" :options="dateoption" type="date" format="yyyy-MM-dd" placeholder="选择日期" style="width: 200px;margin-left: 10px;"></Date-picker>
                </i-col>
                <i-col class="endDate" span="12">
                    <Date-picker @on-change="endChange" :disabled="isDisabledEnd" :options="dateoption" type="date" format="yyyy-MM-dd"  placeholder="选择日期" placement="bottom-end" style="width: 200px"></Date-picker>
                </i-col>
        </row>
    </div>
    <div id="path-tables">
        <i-table class="path-tables-table" highlight-row height="180" :columns="pathColumns_old" :data="pathTableDataNew"
            @on-row-click="getSelectPath"></i-table>
        <i-table class="path-tables-table" highlight-row height="180" :columns="pathColumns" :data="pathTableDataOld"
            @on-row-click="getSelectPath"></i-table>
        <div style="width:100%">
            <parent></parent>
            <div id="totalChart2" class="echart-class">
                
            </div>
        </div>
    </div>
    <div id="pathAnalysisMap">
    </div>
</div>
<style>
    .compare{
            position: absolute;
            z-index: 10;
            left: 20%;
            display: flex;
            padding: 5px;
            border-radius: 10%;
            background-color: #ffffff;
            width: 750px;
        }
        .compare-div{
            font-size: 1.5em;
            color: #436335;
            text-align: center;
            vertical-align:middle;
            line-height: 30px;
            margin-right: 10px;
        }
    .endDate{
    width:20%;
    margin-left:10px;
    }
    #button-list{
    z-index: 2;
    display: flex;
    width: 100%;
    }
    #button-list > button{
    width: 25vw;
    }
    #pathAnalysisMap {
        height: 100vh;
    }

    #pathAnalysis {
        display: absolute
    }

    #path-tables {
        display: none;
        position: relative;
        float: right;
        width: 37%;
    }

    .path-tables-table {
        display: contents
    }

    .path-data-select {
        width: 200px;
    }
    .echart-class {
        width: 100%;
        position: absolute;
        /* background: red; */
        height: 300px;
        float: left;
    }
</style>
<!-- <script type="text/javascript" src="../../node_modules/axios/dist/axios.js"></script> -->
<script type="text/javascript" src="JS/page/logistics/pathAnalysis.js"></script>